<template>
    <div class="carousel-container">
        <div class="carousel-list" ref="listRef">
            <div
                class="list-item"
                v-for="(item, index) in imagesList"
                :key="item"
                @click="handleClickListItem(item, index)"
                v-randomBgColor>
                <img :src="item" alt="" />
            </div>
        </div>
        <div class="carousel-arrow carousel-arrow-left" @click="handleClickArrowLeft">
            <LeftOutlined />
        </div>
        <div class="carousel-arrow carousel-arrow-right" @click="handleClickArrowRight">
            <RightOutlined />
        </div>
        <div class="carousel-indicators">
            <div
                :class="['indicator-item', curentActiveIndex === index ? 'active' : '']"
                v-for="(_item, index) in imagesList"
                :key="index"
                @click="handleClickIndicator(index)"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { LeftOutlined, RightOutlined } from "@ant-design/icons-vue";
import { ref } from "vue";

const { imagesList } = withDefaults(defineProps<{ imagesList: string[] }>(), {
    imagesList: () => ["1", "2", "3"]
});
const emits = defineEmits<{
    (e: "change", item: (typeof imagesList)[0], index: number): void;
    (e: "content-item-click", item: (typeof imagesList)[0], index: number): void;
}>();

// 轮播元素dom
const listRef = ref<HTMLDivElement | null>(null);
// 当前轮播的图片索引
const curentActiveIndex = ref(0);

// 轮播
const moveTo = (index: number) => {
    listRef.value!.style.transition = "transform 0.5s ease-in-out";
    listRef.value!.style.transform = `translateX(-${index * 100}%)`;
    setTimeout(() => {
        listRef.value!.style.transition = "";
    }, 300);
    curentActiveIndex.value = index;
    emits("change", imagesList[index], index);
};

// 指示器点击事件
const handleClickIndicator = (index: number) => moveTo(index);

// 箭头点击事件
const handleClickArrowLeft = () => {
    if (curentActiveIndex.value <= 0) return;
    const targetIndex = curentActiveIndex.value - 1;
    moveTo(targetIndex);
};
const handleClickArrowRight = () => {
    if (curentActiveIndex.value >= imagesList.length - 1) return;
    const targetIndex = curentActiveIndex.value + 1;
    moveTo(targetIndex);
};

// 点击当前轮播卡片
const handleClickListItem = (item: (typeof imagesList)[0], index: number) => {
    emits("content-item-click", item, index);
};
</script>

<style scoped lang="scss">
.carousel-container {
    position: relative;
    overflow: hidden;
    .carousel-list {
        display: flex;
        align-items: center;
        width: 100%;
        .list-item {
            flex: 0 0 100%;
            width: 100%;
            height: 400px;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                cursor: pointer;
                user-select: none;
            }
        }
    }
    .carousel-arrow {
        position: absolute;
        top: 50%;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        font-size: 20px;
        color: #ffffff;
        cursor: pointer;
        background-color: rgb(0 0 0 / 50%);
        border-radius: 50%;
        transform: translateY(-50%);
        &:hover {
            background-color: rgb(0 0 0 / 80%);
        }
    }
    .carousel-arrow-left {
        left: 10px;
    }
    .carousel-arrow-right {
        right: 10px;
    }
    .carousel-indicators {
        position: absolute;
        bottom: 10px;
        left: 50%;
        display: flex;
        justify-content: center;
        margin-top: 10px;
        cursor: pointer;
        transform: translateX(-50%);
        .indicator-item {
            width: 10px;
            height: 10px;
            margin: 0 5px;
            background-color: #ffffff;
            border: 1px solid rgb(0 0 0 / 50%);
            border-radius: 50%;
            &:hover {
                border: 1px solid rgb(0 0 0);
            }
        }
        .active {
            background-color: #4f4f4f;
        }
    }
}
</style>
